<template>
  <div class="page-container-padding" style="display: flex">
    <!-- 显示内容 -->
    <div style="width: 50%">
      <div>
        <el-date-picker
          v-model="currentDate"
          value-format="yyyyMMdd"
          size="mini"
          :clearable="false"
          @change="getReferenceData"
        ></el-date-picker>
        <el-select
          v-model="currentUserId"
          filterable
          clearable
          remote
          size="mini"
          placeholder="输入用户名称指定用户查询"
          style="margin-left: 6px"
          :remote-method="getUserByName"
          :loading="userLoading"
        >
          <el-option
            v-for="user in userSelectList"
            :key="user.id"
            :value="user.id"
            :label="user.admin_name"
          ></el-option>
        </el-select>
        <el-button
          style="margin-left: 6px"
          type="primary"
          size="mini"
          @click="getReferenceData"
        >
          查询
        </el-button>
        <el-button
          style="margin-left: 6px"
          type="infor"
          size="mini"
          :loading="exportPdfLoading"
          @click="toExportPdf"
        >
          导出PDF
        </el-button>
        <el-button
          style="margin-left: 6px"
          type="infor"
          size="mini"
          :loading="exportWordLoading"
          @click="toExportWord"
        >
          导出Word
        </el-button>
      </div>
      <!-- 显示晨会纪要 -->
      <div class="container">
        <!-- 显示还未填写的品种 -->
        <div v-if="noEditVarietyList.length > 0" style="margin-bottom: 16px">
          <div style="margin-bottom: 6px">
            <el-checkbox v-model="includeAll">
              导出时包含未填写的品种
            </el-checkbox>
          </div>
          <span>还未填写的品种：</span>
          <span v-for="item in noEditVarietyList" :key="item.variety_en">
            {{ item.variety_name }}、
          </span>
        </div>
        <div v-if="varietyList.length > 0">
          <div
            v-for="item in varietyList"
            :key="item.variety_en"
            class="refrence-item"
          >
            <div class="item-title">
              <span class="item-dot"></span>
              <span class="item-text">{{ item.variety_name }}</span>
              <span class="item-del">
                <i class="el-icon-delete" @click="toDeleteItem(item)">删除</i>
              </span>
            </div>
            <div class="item-refrenece">
              <div v-for="(p, i) in item.reference.split('\n')" :key="i">
                <div>{{ p }}</div>
              </div>
            </div>
            <div v-if="item.reference" class="mark-row">
              <el-input
                v-model="item.mark_text"
                placeholder="写入标记或投诉的内容"
              ></el-input>
              <el-button type="text" @click="toSaveEarlyMark(item)">
                保存
              </el-button>
            </div>
          </div>
        </div>
        <div v-else>
          <el-empty :description="currentDate + '没有晨会纪要信息'"></el-empty>
        </div>
      </div>
    </div>
    <!-- 管理文件 -->
    <div style="width: 50%; padding-left: 50px">
      <div class="file-table-title">晨会文件记录</div>
      <el-table border stripe :data="fileList">
        <el-table-column prop="file_date" label="日期" width="100" />
        <el-table-column prop="title" label="标题" />
        <el-table-column label="pdf下载" width="88" align="center">
          <template #default="scope">
            <vab-icon
              :icon="['fas', 'file-pdf']"
              style="cursor: pointer"
              @click="downloadFile(scope.row, 'pdf')"
            ></vab-icon>
          </template>
        </el-table-column>
        <el-table-column label="word下载" width="88" align="center">
          <template #default="scope">
            <vab-icon
              v-if="scope.row.word_file.length > 0"
              :icon="['fas', 'file-word']"
              style="cursor: pointer"
              @click="downloadFile(scope.row, 'word')"
            ></vab-icon>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 5px"
        background
        hide-on-single-page
        :current-page="page"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="currentPageChanged"
      ></el-pagination>
      <!-- 单品种填写 -->
      <div style="line-height: 26px; margin-top: 10px">
        帮他人填写单个品种晨会时才使用以下功能(日期以左上角为准)
      </div>
      <div>
        <el-select
          v-model="currentEditObj.currentVarietyEn"
          style="width: 190px; margin: 8px 0"
          filterable
          size="mini"
          placeholder="选择品种"
        >
          <el-option
            v-for="v in varietyList"
            :key="v.variety_en"
            :value="v.variety_en"
            :label="`${v.variety_name} (${v.variety_en})`"
          ></el-option>
        </el-select>
        <el-select
          v-model="currentEditObj.currentUserId"
          filterable
          clearable
          remote
          size="mini"
          placeholder="输入名称查询指定作者"
          style="margin-left: 6px"
          :remote-method="getUserByName"
          :loading="userLoading"
        >
          <el-option
            v-for="user in userSelectList"
            :key="user.id"
            :value="user.id"
            :label="user.admin_name"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          size="mini"
          style="margin-left: 6px"
          :loading="currentEditObj.saveLoading"
          @click="toSaveSignalReference"
        >
          保存
        </el-button>
        <el-input
          v-model="currentEditObj.currentText"
          show-word-limit
          type="textarea"
          maxlength="1500"
          :rows="9"
          placeholder="在这里填写品种晨会纪要"
          style="font-size: 15px; line-height: 20px"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <div style="font-weight: 700">标记晨会统计情况：</div>
        <div style="margin-bottom: 10px">
          <el-date-picker
            v-model="markStat.dateRange"
            type="daterange"
            value-format="yyyyMMdd"
            :clearable="false"
          ></el-date-picker>
          <el-button
            type="primary"
            style="margin-left: 10px"
            :loading="markStat.queryLoading"
            @click="toQueryMarkState"
          >
            确定查询
          </el-button>
        </div>
        <el-table border stripe :data="markStat.statData">
          <el-table-column prop="admin_name" label="姓名" width="100">
            <template #default="{ row }">
              <div style="cursor: pointer" @click="toShowMarkDetail(row)">
                {{ row.admin_name }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="total_count" label="标记数" />
        </el-table>
        <div class="mark-detail">
          <div
            v-for="item in markStat.curDetail"
            :key="item.id"
            class="mark-item"
          >
            <div class="title">
              {{ item.create_date }} {{ item.variety_name }}
            </div>
            <div class="content">{{ item.reference }}</div>
            <div class="mark-text">{{ item.mark_text }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { datetimeToStr, getMonthDatePoint } from '@/utils/datetimeUtils'
  import {
    GetEarlyReference,
    DeleteEarlyReference,
    GetPeriodicReportFile,
    AdminCreateEarlyReference,
    MarkEarlyReference,
    GetMarkEarlyReference,
  } from '@/api/departmentWork/periodReport'
  import { GetUserListByName } from '@/api/systemManage/userInfo'
  export default {
    data() {
      return {
        currentDate: datetimeToStr(new Date(), true, ''),
        currentUserId: null,
        userLoading: false,
        userSelectList: [],
        varietyList: [],
        includeAll: true,
        noEditVarietyList: [],
        exportPdfLoading: false,
        exportWordLoading: false,
        // 文件列表
        fileList: [],
        page: 1,
        pageSize: 15,
        totalCount: 0,
        // 管理员单个填写
        currentEditObj: {
          currentVarietyEn: null,
          currentUserId: null,
          currentText: '',
          saveLoading: false,
        },
        markStat: {
          dateRange: [],
          queryLoading: false,
          statData: [],
          curDetail: [],
        },
      }
    },
    mounted() {
      this.markStat.dateRange = getMonthDatePoint(new Date(), 'current', '')
      console.log(this.markStat)
      this.getReferenceData()
      this.getEarlyReferenceFile()
    },
    methods: {
      toSaveSignalReference() {
        const itemData = {
          variety_en: this.currentEditObj.currentVarietyEn,
          create_date: this.currentDate,
          reference: this.currentEditObj.currentText,
          user_id: this.currentEditObj.currentUserId,
        }
        if (
          !itemData.user_id ||
          !itemData.variety_en ||
          itemData.reference.length < 1
        ) {
          this.$baseMessage('请填写完成信息再保存!')
          return
        }
        this.currentEditObj.saveLoading = true
        AdminCreateEarlyReference(itemData).then((res) => {
          this.$baseMessage(res.msg, 'success')
          this.currentEditObj.saveLoading = false
          this.currentEditObj.currentText = ''
        })
      },

      getReferenceData() {
        if (this.currentUserId === '') {
          this.currentUserId = null
        }
        GetEarlyReference(this.currentDate, this.currentUserId).then((res) => {
          let tmpData = []
          let noDataVariety = []
          res.data.forEach((ele) => {
            ele.data.forEach((v) => {
              tmpData.push(v)
              if (!v.reference || v.reference.length < 1) {
                noDataVariety.push(v)
              }
            })
          })
          this.varietyList = tmpData
          this.noEditVarietyList = noDataVariety
        })
      },
      // 使用名称搜索用户
      getUserByName(name) {
        if (name === '') {
          return
        }
        this.userLoading = true
        GetUserListByName(name).then((res) => {
          this.userSelectList = res.data
          this.userLoading = false
        })
      },

      toSaveEarlyMark(item) {
        MarkEarlyReference({
          record_id: item.id,
          mark_text: item.mark_text,
        }).then((res) => {
          this.$baseMessage(res.msg, 'success')
        })
      },

      toQueryMarkState() {
        this.markStat.queryLoading = true
        GetMarkEarlyReference(
          this.markStat.dateRange[0],
          this.markStat.dateRange[1]
        )
          .then((res) => {
            this.markStat.statData = res.data
            this.markStat.curDetail = []
            this.markStat.queryLoading = false
          })
          .catch(() => {
            this.markStat.queryLoading = false
          })
      },
      toShowMarkDetail(row) {
        console.log(row)
        this.markStat.curDetail = row.rows
      },

      // 导出pdf
      toExportPdf() {
        this.exportPdfLoading = true
        const includeAll = this.includeAll ? 1 : 0
        GetEarlyReference(
          this.currentDate,
          this.currentUserId,
          'pdf',
          includeAll
        ).then((res) => {
          this.exportPdfLoading = false
          this.getEarlyReferenceFile()
          let a = document.createElement('a')
          a.href = res.data.file_url
          a.style.display = 'none'
          a.target = '_blank'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        })
      },

      // 导出word
      toExportWord() {
        this.exportWordLoading = true
        const includeAll = this.includeAll ? 1 : 0
        GetEarlyReference(
          this.currentDate,
          this.currentUserId,
          'word',
          includeAll
        ).then((res) => {
          this.exportWordLoading = false
          this.getEarlyReferenceFile()
          let a = document.createElement('a')
          a.href = res.data.file_url
          a.style.display = 'none'
          a.target = '_blank'
          document.body.appendChild(a)
          a.click()
          document.body.removeChild(a)
        })
      },

      // 删除条目
      toDeleteItem(item) {
        this.$baseConfirm('确定要删除这个条目吗?', '删除确认', () => {
          DeleteEarlyReference(item.id).then((res) => {
            this.$baseMessage(res.msg, 'success')
            this.getReferenceData()
          })
        })
      },

      // 获取每日晨会的文件
      getEarlyReferenceFile() {
        GetPeriodicReportFile('EARLY', this.page, this.pageSize, 'dept').then(
          (res) => {
            const data = res.data
            this.fileList = data.data
            this.page = data.page
            this.totalCount = data.total_count
          }
        )
      },

      // 下载文件
      downloadFile(row, fileType) {
        let url = ''
        if (fileType === 'pdf') {
          url = row.pdf_file
        } else if (fileType === 'word') {
          url = row.word_file
        } else {
          return
        }
        let a = document.createElement('a')
        a.href = url
        a.style.display = 'none'
        a.target = '_blank'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      },

      // 文件记录页码改变
      currentPageChanged(page) {
        this.page = page
        this.getEarlyReferenceFile()
      },
    },
  }
</script>
<style scoped lang="scss">
  .item-title {
    margin-bottom: 4px;
    line-height: 26px;
    .item-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fe6814;
    }
    .item-text {
      font-size: 18px;
      font-weight: 700;
      padding-left: 8px;
    }
    .item-del {
      float: right;
      cursor: pointer;
      color: #e62929;
    }
  }
  .container {
    margin-top: 8px;
    .item-refrenece {
      font-size: 16px;
      margin-left: 16px;
      text-indent: 2em;
      padding: 10px;
      border: 1px solid #ececec;
      line-height: 26px;
      border-radius: 3px;
      &:hover {
        box-shadow: 0px 0px 1px 1px #51b2f3;
        color: #000;
        background-color: #eee;
      }
    }
    .mark-row {
      margin-left: 16px;
      margin-bottom: 22px;
      display: flex;
      align-items: center;
    }
  }
  .file-table-title {
    color: #fe6814;
    line-height: 26px;
    font-weight: 700;
    font-size: 16px;
  }
  .mark-detail {
    .mark-item {
      margin: 10px 0;
      line-height: 22px;
    }
    .title {
      color: #fe6814;
    }
    .content {
      text-indent: 2em;
    }
    .mark-text {
      color: #999;
      text-align: right;
    }
  }
</style>
